<template>
  <div id="HomePage">
    <!-- 轮播图 -->
    <div id="swiper"
         class="container-fuild">
      <div class="swiper-container banner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"
               v-for="(item,index) in swiperList"
               :key="index">
            <img class="swiper-lazy"
                 :data-src="item.img"
                 alt="轮播图">
            <div class="swiper-lazy-preloader"></div>
            <div class="swiper-slide-title">
              <h1>{{item.title}}</h1>
              <p>{{item.content}}</p>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <!-- 大数据管理系统 -->
    <div id="bigData"
         class="container-fuild">
      <!-- 海 -->
      <div class="row bigData-container">
        <div class="col-xs-18 col-sm-18 col-md-9"
             style="padding-left:150px">
          <div class="first">
            <div class="table-title">
              <span class="title-text">海运订舱</span>
              <span class="title-more"><a href="#"
                   @click="goServiceDetail">更多+</a></span>
            </div>

            <div class="table-list"
                 v-for="(item,index) in sealist"
                 :key="index">
              <div class="line-item">
                <a href="#"
                   class="line-item-a"
                   @click="goProductDetail(item)">
                  <div class="item-content">
                    <div class="item-titleinfo">
                      <div class="item-logo">
                        <img class="item-logo-img"
                             src=""
                             alt="">
                      </div>
                      <div class="item-name">{{item.product_name}}</div>
                      <div class="item-linetime">航程：{{getlinetime(item.eta_time,item.etd_time)}}天</div>
                    </div>
                    <div class="item-maininfo">
                      <div class="item-company">{{item.company_name}}</div>
                      <div class="item-date">
                        <span>发布时间：{{item.publish_time.substr(0,10)}}</span>
                        <span class="able-date">有效时间：{{item.start_time.substr(0,10)}} 至 {{item.end_time.substr(0,10)}}</span>
                      </div>
                    </div>
                    <div class="item-start-end">
                      <div class="item-start">
                        <div class="start-name">
                          <span class="start-point">起</span>{{item.start_point_name}}
                        </div>
                        <div class="start-date">ETD：{{item.etd_time.substr(0,10)}}</div>
                      </div>
                      <div class="arrow-logo">
                        <img src=""
                             alt="">
                      </div>
                      <div class="item-end">
                        <div class="end-name">
                          <span class="end-point">终</span>{{item.end_point_name}}
                        </div>
                        <div class="end-date">ETA：{{item.eta_time.substr(0,10)}}</div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>

        </div>
        <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
          <img class="table-img"
               src="@/assets/img/table1.png"
               alt="海运图片">
        </div>
      </div>
      <div style="padding-top:30px"></div>
      <!-- 陆 -->
      <div class="row bigData-container">
        <div class="col-xs-18 col-sm-18 col-md-9"
             style="padding-left:150px">
          <div class="first">
            <div class="table-title">
              <span class="title-text">陆运订舱</span>
              <span class="title-more"><a href="#"
                   @click="goServiceDetail">更多+</a></span>
            </div>

            <div class="table-list"
                 v-for="(item,index) in linelist"
                 :key="index">
              <div class="line-item">
                <a href="#"
                   class="line-item-a"
                   @click="goProductDetail(item)">
                  <div class="item-content">
                    <div class="item-titleinfo">
                      <div class="item-logo">
                        <img class="item-logo-img"
                             src=""
                             alt="">
                      </div>
                      <div class="item-name">{{item.product_name}}</div>
                      <div class="item-linetime">航程：{{getlinetime(item.eta_time,item.etd_time)}}天</div>
                    </div>
                    <div class="item-maininfo">
                      <div class="item-company">{{item.company_name}}</div>
                      <div class="item-date">
                        <span>发布时间：{{item.publish_time.substr(0,10)}}</span>
                        <span class="able-date">有效时间：{{item.start_time.substr(0,10)}} 至 {{item.end_time.substr(0,10)}}</span>
                      </div>
                    </div>
                    <div class="item-start-end">
                      <div class="item-start">
                        <div class="start-name">
                          <span class="start-point">起</span>{{item.start_point_name}}
                        </div>
                        <div class="start-date">ETD：{{item.etd_time.substr(0,10)}}</div>
                      </div>
                      <div class="arrow-logo">
                        <img src=""
                             alt="">
                      </div>
                      <div class="item-end">
                        <div class="end-name">
                          <span class="end-point">终</span>{{item.end_point_name}}
                        </div>
                        <div class="end-date">ETA：{{item.eta_time.substr(0,10)}}</div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>

        </div>
        <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
          <img class="table-img"
               src="@/assets/img/table2.png"
               alt="陆运图片">
        </div>
      </div>
      <div style="padding-top:30px"></div>
      <!-- 空 -->
      <div class="row bigData-container">
        <div class="col-xs-18 col-sm-18 col-md-9"
             style="padding-left:150px">
          <div class="first">
            <div class="table-title">
              <span class="title-text">空运订舱</span>
              <span class="title-more"><a href="#"
                   @click="goServiceDetail">更多+</a></span>
            </div>

            <div class="table-list"
                 v-for="(item,index) in airlist"
                 :key="index">
              <div class="line-item">
                <a href="#"
                   class="line-item-a"
                   @click="goProductDetail(item)">
                  <div class="item-content">
                    <div class="item-titleinfo">
                      <div class="item-logo">
                        <img class="item-logo-img"
                             src=""
                             alt="">
                      </div>
                      <div class="item-name">{{item.product_name}}</div>
                      <div class="item-linetime">航程：{{getlinetime(item.eta_time,item.etd_time)}}天</div>
                    </div>
                    <div class="item-maininfo">
                      <div class="item-company">{{item.company_name}}</div>
                      <div class="item-date">
                        <span>发布时间：{{item.publish_time.substr(0,10)}}</span>
                        <span class="able-date">有效时间：{{item.start_time.substr(0,10)}} 至 {{item.end_time.substr(0,10)}}</span>
                      </div>
                    </div>
                    <div class="item-start-end">
                      <div class="item-start">
                        <div class="start-name">
                          <span class="start-point">起</span>{{item.start_point_name}}
                        </div>
                        <div class="start-date">ETD：{{item.etd_time.substr(0,10)}}</div>
                      </div>
                      <div class="arrow-logo">
                        <img src=""
                             alt="">
                      </div>
                      <div class="item-end">
                        <div class="end-name">
                          <span class="end-point">终</span>{{item.end_point_name}}
                        </div>
                        <div class="end-date">ETA：{{item.eta_time.substr(0,10)}}</div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>

        </div>
        <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
          <img class="table-img"
               src="@/assets/img/table3.jpg"
               alt="空运图片">
        </div>
      </div>
      <div style="padding-top:30px"></div>
      <!-- 铁 -->
      <div class="row bigData-container">
        <div class="col-xs-18 col-sm-18 col-md-9"
             style="padding-left:150px">
          <div class="first">
            <div class="table-title">
              <span class="title-text">铁路订舱</span>
              <span class="title-more"><a href="#"
                   @click="goServiceDetail">更多+</a></span>
            </div>

            <div class="table-list"
                 v-for="(item,index) in railwaylist"
                 :key="index">
              <div class="line-item">
                <a href="#"
                   class="line-item-a"
                   @click="goProductDetail(item)">
                  <div class="item-content">
                    <div class="item-titleinfo">
                      <div class="item-logo">
                        <img class="item-logo-img"
                             src=""
                             alt="">
                      </div>
                      <div class="item-name">{{item.product_name}}</div>
                      <div class="item-linetime">航程：{{getlinetime(item.eta_time,item.etd_time)}}天</div>
                    </div>
                    <div class="item-maininfo">
                      <div class="item-company">{{item.company_name}}</div>
                      <div class="item-date">
                        <span>发布时间：{{item.publish_time.substr(0,10)}}</span>
                        <span class="able-date">有效时间：{{item.start_time.substr(0,10)}} 至 {{item.end_time.substr(0,10)}}</span>
                      </div>
                    </div>
                    <div class="item-start-end">
                      <div class="item-start">
                        <div class="start-name">
                          <span class="start-point">起</span>{{item.start_point_name}}
                        </div>
                        <div class="start-date">ETD：{{item.etd_time.substr(0,10)}}</div>
                      </div>
                      <div class="arrow-logo">
                        <img src=""
                             alt="">
                      </div>
                      <div class="item-end">
                        <div class="end-name">
                          <span class="end-point">终</span>{{item.end_point_name}}
                        </div>
                        <div class="end-date">ETA：{{item.eta_time.substr(0,10)}}</div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>

        </div>
        <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
          <img class="table-img"
               src="@/assets/img/table4.png"
               alt="铁路图片">
        </div>
      </div>
      <div style="padding-top:30px"></div>
    </div>
    <!-- 新闻动态 -->
    <div id="customer"
         class="container-fuild">
      <div class="container customer-container">
        <p class="customer-title text-center">新闻动态</p>
        <div class="swiper-container customer-swiper hidden-xs">
          <div class="swiper-wrapper">
            <div class="swiper-slide customer-block"
                 v-for="(item,index) in newsList"
                 :key="index"
                 @click="gonewdetail(item)">
              <div class="customer-logo">
                <meta name="referrer"
                      content="no-referrer">
                <img class="center-block"
                     :src="item.content1_img"
                     alt="logo">
              </div>
              <div class="customer-yh">
                <img src="@/assets/img/yinhao.png"
                     alt="引号">
              </div>
              <div class="customer-content1">
                <small>{{item.content1}}</small>
              </div>
              <div class="customer-content2">{{item.title}}</div>
            </div>
          </div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="row visible-xs customer-block">
          <div class="col-xs-12"
               v-for="(item,index) in newsList"
               :key="index">
            <div class="customer-logo">
              <meta name="referrer"
                    content="no-referrer">
              <img class="center-block"
                   :src="item.content1_img"
                   alt="logo">
            </div>
            <div class="customer-yh">
              <img src="@/assets/img/yinhao.png"
                   alt="引号">
            </div>
            <div class="customer-content1">
              <small>{{item.content1}}</small>
            </div>
            <div class="customer-content2">
              <small>{{item.title}}</small>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 不忘初心，完善服务 -->
    <div id="contactUs"
         class="container-fuild text-center">
      <div class="container contactUs-container wow slideInUp">
        <!-- <h1>您身边的IT专家</h1>
        <h3>7x24小时提供出色的IT服务</h3> -->
        <!-- <button
          class="btn btn-default btn-sm"
          onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';"
          onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';"
        >联系我们</button> -->
        <!-- <div class="contactUs-contactWay">
          <span></span>
          <span></span>
          <span></span>
        </div> -->
      </div>
    </div>
    <!-- 为什么选择我们 -->
    <div id="whyChooseUs"
         class="conatiner-fuild">
      <div class="container">
        <div class="whyChooseUs-title text-center">
          <p>产品特色优势</p>
          <!-- <p>THE REASON TO CHOOSING US</p> -->
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3 server-wrapper"
               v-for="(item,index) in serverList"
               :key="index">
            <div class="server-block wow slideInUp"
                 onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
                 onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'">
              <img class="center-block"
                   :src="item.logo"
                   alt="logo">
              <p class="text-center">{{item.title}}</p>
              <div class="text-center"
                   v-html="item.content"
                   onmouseenter="this.style.color='#28f'"
                   onmouseleave="this.style.color='#ccc'"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
export default {
  name: "home",
  data () {
    return {
      // 轮播图
      swiperList: [
        {
          img: require("@/assets/img/home1.png"),
          path: "",
        },
        {
          img: require("@/assets/img/home2.png"),
          path: "",
        },
        {
          img: require("@/assets/img/home3.png"),
          path: "",
        },
        {
          img: require("@/assets/img/home4.png"),
          path: "",
        }
      ],
      // 表格
      sealist: [],
      linelist: [],
      airlist: [],
      railwaylist: [],
      // 新闻
      newsList: [],
      // 产品优势
      serverList: [
        {
          logo: require("@/assets/img/tel.png"),
          title: "一体化订购",
          // content: "<p>由专业客服提供人工服务</p>负责疑难问题和故障受理"
        },
        {
          logo: require("@/assets/img/computer.png"),
          title: "物流可视化",
          // content: "<p>利用远程视频工具，提供协助</p>帮助客户进行调试、解决故障"
        },
        {
          logo: require("@/assets/img/youshi2.png"),
          title: "小拼箱",
          // content: "<p>由技术支持工程师，负责问题解答</p>需求受理及故障受理"
        },
        {
          logo: require("@/assets/img/youshi.png"),
          title: "前后端分离",
          // content: "<p>利用企业QQ提供在线解答</p>帮助企业快速准确解决问题和故障"
        }
      ]
    };
  },
  created () {
    this.getproducts()
    this.getnewList()
  },
  computed: {

  },
  mounted () {
    /* banner-swiper */
    new Swiper(".banner-swiper", {
      loop: true, // 循环模式选项
      effect: 'fade',
      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      // 延迟加载
      lazy: {
        loadPrevNext: true
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    /* customer-swiper */
    new Swiper(".customer-swiper", {
      loop: true, // 循环模式选项
      slidesPerView: 3,
      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      lazy: {
        loadPrevNext: true
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    /* wowjs动画 */
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();

  },
  methods: {
    getproducts () {
      const api = `products`
      this.$axios.get(api)
        .then(res => {
          console.log(res);
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].service_type === '0') {
              switch (res.data.data[i].product_type) {
                case 'sea':
                  this.sealist.push(res.data.data[i])
                  break;
                case 'line':
                  this.linelist.push(res.data.data[i])
                  break;
                case 'air':
                  this.airlist.push(res.data.data[i])
                  break;
                case 'railway':
                  this.railwaylist.push(res.data.data[i])
                  break;
                default:
                  console.log('其他类型舱位')
                  return
              }
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    goServiceDetail () {
      this.$router.push('/ServiceDetail')
    },
    goProductDetail (item) {
      this.$router.push({
        name: 'ProductDetail',
        params: { row: item }
      })
    },
    getlinetime (date1, date2) {
      // console.log(date1.substr(0,10))
      // console.log(date2)
      var date1 = new Date(date1)
      var date2 = new Date(date2)
      var s1 = date1.getTime()
      var s2 = date2.getTime()
      var total = (s1 - s2) / 1000
      var day = parseInt(total / (24 * 60 * 60))
      return day
    },
    //获取新闻
    getnewList () {
      const api = `getnewslist`
      this.$axios.get(api)
        .then(res => {
          console.log('获取新闻：', res.data.data)
          for (let i = 0; i < res.data.data.length; i++) {
            this.newsList.push(res.data.data[i])
          }
          // 删除两个，第三个开始
          this.newsList = this.newsList.splice(1, 4)
          // console.log('新闻列表：', this.newsList)
        })
        .catch(err => {
          console.log(err)
        })
    },
    gonewdetail (item) {
      this.$router.push({
        name: 'newsdetail',
        params: { row: item }
      })
    }
  }
};
</script>
<style scoped>
/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 表格 */
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
.title-more {
  color: #07467c;
  font-size: 13px;
  line-height: 32px;
  text-align: right;
  cursor: pointer;
}
.table-list {
  min-height: 120px;
}
.line-item {
  height: 132px;
  background-color: #f4f4f4;
}
.line-item-a {
  display: block;
}
a {
  text-decoration: none;
  color: #666;
}
.item-content {
  height: 102px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-titleinfo {
  width: 110px;
  text-align: center;
}
.item-logo {
}
.item-name {
  font-size: 14px;
  color: #888;
  padding: 0 10px;
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-break: break-all;
  margin: 0 auto;
}
.item-linetime {
  font-size: 12px;
  color: #4198c7;
}

.item-maininfo {
}
.item-company {
  font-size: 18px;
  color: #666;
}
.item-date {
  color: #07467c;
  font-size: 14px;
}
.able-date {
  margin-left: 20px;
}

.item-start-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-start {
}
.start-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.start-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #07467c;
  color: #fff;
  border-radius: 50%;
}
.start-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}
.arrow-logo {
  margin-right: 25px;
  margin-left: 25px;
  margin-top: 5px;
}
.item-end {
}
.end-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.end-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #bd6664;
  color: #fff;
  border-radius: 50%;
}
.end-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}

.table-img {
  width: 280px;
  height: 559px;
  height: auto !important;
}
/* 轮播图 */
#swiper {
  height: 500px;
}
#swiper .banner-swiper {
  width: 100%;
  height: 100%;
}
#swiper .banner-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
}
#swiper .banner-swiper .swiper-slide {
  position: relative;
}
#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  /* background: rgba(51, 51, 51, 0.534); */
  text-align: center;
  line-height: 80px;
}
#swiper .banner-swiper .swiper-slide-title > h1 {
  font-size: 50px;
  margin-top: 12%;
}
#swiper .banner-swiper .swiper-slide-title > p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}
/* 大数据管理系统 */
#bigData {
  padding: 50px 100px;
  transition: all ease 0.6s;
  box-sizing: border-box;
}
#bigData .bigData-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
#bigData p {
  font-size: 14px;
  color: #333;
  line-height: 2rem;
}
#bigData .bigData-device {
  margin: 50px 0 20px;
}

/* 您身边的IT专家 */
#contactUs {
  color: #fff;
  height: 450px;
  background: url("../assets/img/homePod.png") 0 0 no-repeat;
  background-size: 100% 100%;
  transition: all ease 0.6s;
}
#contactUs .contactUs-container {
  padding-top: 50px;
}
#contactUs .contactUs-container button {
  width: 300px;
  height: 50px;
  margin-top: 40px;
}
#contactUs .contactUs-container .contactUs-contactWay span {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 30px;
}
#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(1) {
  background: url("../assets/img/weixin.png") 0 0 no-repeat;
  background-size: 100% 100%;
}
#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(2) {
  background: url("../assets/img/weibo.png") 0 0 no-repeat;
  background-size: 100% 100%;
}
#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(3) {
  background: url("../assets/img/twitter.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

/* 客户评价 */
#customer {
  padding: 50px 0;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}
#customer .customer-title {
  font-size: 30px;
  color: rgb(102, 102, 102);
  margin: 0 0 30px;
}
#customer .customer-block {
  background: #fff;
  padding: 30px;
  cursor: pointer;
}
#customer .customer-block:hover {
  border: 2px solid rgb(184, 184, 184);
}
#customer .customer-logo img {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
#customer .customer-yh img {
  width: 34px;
  height: 34px;
}
#customer .customer-content1 {
  height: 200px;
  overflow: hidden;
  text-overflow: ellipsis; /*超出则...代替*/
  padding-bottom: 20px;
  border-bottom: 1px solid #0ce9f1;
}
#customer .customer-content2 {
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis; /*超出则...代替*/
  padding-top: 20px;
}
/* 为什么选择我们 */
#whyChooseUs {
  padding: 30px;
}
#whyChooseUs .whyChooseUs-title {
  margin-bottom: 50px;
}
#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
  font-size: 25px;
  font-weight: 500;
}
#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
  font-size: 14px;
}
#whyChooseUs .server-block {
  padding: 50px 20px;
  border: 1px solid #ccc;
  border-bottom: 5px solid #ccc;
}
#whyChooseUs .server-block img {
  width: 48px;
  height: 48px;
}
#whyChooseUs .server-block > p {
  font-size: 20px;
  margin: 30px 0;
}
#whyChooseUs .server-block > div {
  color: #ccc;
}

/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  #swiper {
    height: 200px;
  }
  #bigData {
    padding: 30px;
  }
  #bigData .bigData-title {
    font-size: 20px;
  }
  #bigData .bigData-device {
    font-size: 20px;
    margin: 10px 0 10px;
  }
  #contactUs {
    height: 200px;
    transition: all ease 0.6s;
  }
  #contactUs .contactUs-container {
    padding-top: 0;
  }
  #contactUs .contactUs-container h1 {
    font-size: 25px;
  }
  #contactUs .contactUs-container h3 {
    font-size: 18px;
  }
  #contactUs .contactUs-container button {
    width: 200px;
    height: 30px;
    margin-top: 20px;
  }
  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 10px;
  }
  #customer {
    padding: 30px 0;
    box-sizing: border-box;
    background: #fff;
  }
  #customer .customer-title {
    font-size: 16px;
    font-weight: bold;
  }
  #customer .customer-logo img {
    width: 48px;
    height: 48px;
  }
  #customer .customer-block {
    padding: 30px;
  }
  #customer .customer-block > div {
    padding: 30px 0;
  }
  #whyChooseUs {
    padding: 20px 0;
    transition: all ease 0.6s;
  }
  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
    font-size: 20px;
    font-weight: 700;
  }
  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
    font-size: 12px;
  }
  #whyChooseUs .server-block {
    padding: 50px 0;
    border: 1px solid #ccc;
    border-bottom: 5px solid #ccc;
  }
  #whyChooseUs .server-block img {
    width: 48px;
    height: 48px;
  }
  #whyChooseUs .server-block > p {
    font-size: 20px;
    margin: 30px 0;
  }
  #whyChooseUs .server-block > div {
    color: #ccc;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }
  #bigData {
    padding: 60px;
  }
  #bigData .bigData-title {
    font-size: 30px;
  }
  #bigData .bigData-device {
    font-size: 30px;
    margin: 30px 0 15px;
  }
  #contactUs {
    height: 300px;
  }
  #contactUs .contactUs-container {
    padding-top: 50px;
  }
  #contactUs .contactUs-container h1 {
    font-size: 30px;
  }
  #contactUs .contactUs-container h3 {
    font-size: 20px;
  }
  #contactUs .contactUs-container button {
    width: 300px;
    height: 50px;
    margin-top: 30px;
  }
  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 15px;
  }
  #customer .customer-title {
    font-size: 24px;
  }
  #whyChooseUs {
    padding: 20px 0;
  }
}
</style>

